<template>
  <div class="redpacket app-wrapper">
      <div class="redpacket-title text-center"><span>普通红包</span></div>
      <div class="redpacket-form">
          <div class="redpacket-form-item" style="margin-bottom: 0;">
              <label for="#" class="form-control">
                  <template v-if="form.type === 1">
                    总金额<i class="icon-pin">拼</i>
                  </template>
                  <template v-else>
                    单个金额
                  </template>
              </label>
              <div class="input-field"><input type="number" class="input-text" placeholder="0.00" v-model="form.price"></div>
              <span class="unit">元</span>
          </div>
          <p class="describe">当前为拼手气红包，<span class="color-red"
            @click="changeType(form.type)"
            >{{form.type === 1 ? '改为等分红包' : '改为拼手气红包'}}</span></p>
          <div class="redpacket-form-item">
              <label for="#" class="form-control">红包个数<i></i></label>
              <div class="input-field"><input type="number" class="input-text" placeholder="填写红包个数，最多500个" v-model="form.nums"></div>
              <span class="unit">个</span>
          </div>
          <div class="redpacket-form-item">
              <label for="#" class="form-control">定时红包</label>
              <div class="input-field text-right">
                <van-switch
                    v-model="form.timeout"
                    size="28px"
                />
              </div>
          </div>
          <div class="redpacket-form-item clearfix" style="position: relative;"
            v-show="form.timeout"
            @click.stop="showDatePicker = true"
          >
              <label for="#" class="form-control">发送时间<i></i></label>
              <span style="float: right; margin-right: 20px;">请选择发送时间</span>
              <i class="icon van-icon van-icon-arrow-down" style="position: absolute; top: 50%; right:12px; transform: translateY(-50%)"></i>
          </div>
          <div class="redpacket-form-item">
              <textarea :placeholder="form.placeholder" v-model="form.bless"></textarea>
          </div>
            <p class="color-dark-red text-center counts">￥{{money}}</p>
            <button type="button" class="form-button form-button-block"
                @click.stop="submitForm"
            >塞钱进红包</button>
            <p class="text-center describe color-light-gray" style="margin-top: 10px;">未领取的红包，将于24小时候发起退款</p>
      </div>
        <van-datetime-picker
            v-if="showDatePicker"
            v-model="form.time"
            type="datetime"
            cancel-button-text=''
            :min-date="minDate"
            @confirm="confirmDateTime"
            @cancel="showDatePicker = false"

        />
  </div>
</template>

<script>

export default {
    components: {},
    props: {},
    data() {
        return {
            showDatePicker: false,
            minDate: new Date(),
            form: {
                type: 1,  // 1普通红包 | 2等分红包
                nums: 1,
                bless: '',  // 祝福语
                price: '',
                average: 0,
                timeout: false,
                placeholder: '恭喜发财，大吉大利',
                time: new Date()
            }
        };
    },
    computed: {
        money(){
            if(this.form.type === 1) return Number(this.form.price).toFixed();;
            return Number(this.form.price * (this.form.nums || 1)).toFixed();
        }
    },
    methods: {
        confirmDateTime(value){
            console.log(value)
            this.showDatePicker = false;
            return false;
        },
        changeType(type){
            this.form.type = type === 1 ? 2 : 1;
        },
        submitForm(){
            console.log(this.form);
        }
    }
};
</script>
<style lang="scss" scoped>
@import '@/assets/config.scss';
.redpacket{
    height: 100%;
    font-size: 30px;
    color: $color-black;
    background-color: #eceded;
    .redpacket-title {
        height: 90px;
        font-size: 30px;
        line-height: 90px;
        color: $color-dark-red;
        background-color: #fff;
        span {
            display: inline-block;
            position: relative;
            &:after{
                display: block;
                content: '';
                width: 100%;
                height: 4px;
                background-color: $color-dark-red;
                bottom: 0;
                left: 0;
            }
        }
    }

    .icon-pin {
        display: inline-block;
        width: 34px;
        height: 34px;
        margin-left: 10px;
        font-size: 24px;
        text-align: center;
        line-height: 34px;
        color: #fff;
        vertical-align: middle;
        background-color: #fcba2e;
        border-radius: 4px;
    }

    .describe {
        padding-left: 30px;
        font-size: 24px;
        line-height: 2.5;
    }

    .redpacket-form {
        padding: 30px;
    }
    .redpacket-form-item {
        padding: 24px 30px;
        margin-bottom: 30px;
        background-color: #fff;
        border-radius: 8px;
        line-height: 56px;
        position: relative;

        .van-switch { vertical-align: middle; }
        .input-text {
            width: 100%;
            padding-right: 30px;
            font-size: 24px;
            text-align: right;
        }

        .unit { 
            position: absolute; 
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 30px;
        }

        textarea { 
            width: 100%; 
            height: 56px;
        }
    }

    .input-field {
        width: 100%;

    }
    .form-control {
        font-size: 30px;
        color: $color-black;
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
    }
    .counts {
        margin: 100px 0 30px;
        font-size: 66px;
    }

    .form-button-block {
        height: 88px;
        font-size: 34px;
        color: #fff;
        background: $color-dark-red;
        border-radius: 8px;
    }
}

.van-picker {
    position: absolute;
    width: 100%;
    bottom: 0;
}
</style>